<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" class="shadowCard">
        <!-- 头部 -->
        <el-row>
          <el-col :offset="21">
            <el-button
              @click="toAdd"
              type="success"
              size="medium"
              inline
              style="margin: 20px 0"
            >
              <i class="el-icon-edit"></i>
              新增试题
            </el-button>
          </el-col>
        </el-row>

        <!-- 中部 -->
        <el-form ref="form" :model="form" inline label-width="80px">
          <el-row type="flex">
            <!-- 第一列 -->
            <el-col :span="6">
              <el-form-item prop="subjectID" label="学科">
                <el-select
                @change="mulu"
                  v-model="form.subjectID"
                  placeholder="请选择"
                  class="inpselect"
                >
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.subjectName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="questionType" label="试题类型">
                <el-select v-model="form.questionType" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in questionType"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="ipt" prop="remarks" label="题目备注">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <!-- 第二列 -->
            <el-col :span="6">
              <el-form-item prop="catalogID" label="二级目录">
                <el-select @change="biaoqian" v-model="form.catalogID" placeholder="请选择">
                 <el-option
                    v-for="item in mulus"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="difficulty" label="难度">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option
                    v-for="item in difficulty"
                    :key="item.index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="ipt" prop="shortName" label="企业简称">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item>
            </el-col>
            <!-- 第三列 -->
            <el-col :span="6">
              <el-form-item prop="tags" label="标签">
                <el-select  v-model="form.tags" placeholder="请选择">
                  <el-option
                    v-for="item in biaoqians"
                    :key="item.index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="direction" label="方向">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 第三列第三排 -->
              <el-row>
                <el-form-item prop="province" label="城市">
                  <el-col :span="12">
                    <el-select
                      v-model="form.province"
                      placeholder="请选择"
                      style="width: 100px"
                      @change="handleProvince"
                    >
                      <el-option
                        v-for="(item, index) in citySelect.provinceList"
                        :key="index"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-select
                      v-model="form.city"
                      placeholder="请选择"
                      style="width: 100px; margin-left: 10px"
                    >
                      <el-option
                        v-for="(item, index) in citySelect.cityList"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-row>
            </el-col>
            <!-- 第四列 -->
            <el-col :span="6">
              <el-form-item class="ipt" prop="keyword" label="关键字">
                <el-input v-model="form.keyword"></el-input>
              </el-form-item>
              <el-form-item prop="creator" label="录入人">
                <el-select v-model="form.creator" placeholder="请选择">
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="city"> </el-form-item>
              <el-form-item class="Clear">
                <el-button @click="resetForm">清除</el-button>
                <el-button @click="soon" type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 警告条 -->
        <el-alert :closable="false" type="info" show-icon>
          数据一共 {{ tableData.length }} 条
        </el-alert>

        <!-- 表格 -->
        <div class="Tab">
          <el-table :data="tableData" style="width: 100%">
            <!-- 试题编号 -->
            <el-table-column prop="number" label="试题编号" width="180">
            </el-table-column>
            <!-- 学科 -->
            <el-table-column prop="subject" label="学科" width="150">
            </el-table-column>
            <!-- 目录 -->
            <el-table-column prop="catalog" label="目录"> </el-table-column>
            <!-- 题型 -->
            <el-table-column label="题型">
              <template slot-scope="scope">
                {{ scope.row.questionType | dataChange }}
              </template>
            </el-table-column>
            <!-- 题干 -->
            <el-table-column prop="question" label="题干" width="250">
              <template slot-scope="scope">
                <p v-html="scope.row.question"></p>
              </template>
            </el-table-column>
            <!-- 录入时间 -->
            <el-table-column prop="addDate" label="录入时间" width="230">
            </el-table-column>
            <!-- 难度 -->
            <el-table-column prop="difficulty" label="难度">
              <template slot-scope="scope">
                {{ scope.row.difficulty | difChange }}
              </template>
            </el-table-column>
            <!-- 录入人 -->
            <el-table-column prop="creator" label="录入人" width="180">
            </el-table-column>
            <!-- 操作 -->
            <el-table-column prop="address" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  @click="detailBut(scope.row)"
                  type="primary"
                  plain
                  icon="el-icon-view"
                  circle
                ></el-button>
                <el-button
                  @click="toAdd(scope.row)"
                  type="success"
                  plain
                  icon="el-icon-edit"
                  circle
                ></el-button>
                <el-button
                  @click="delBut(scope.row)"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  circle
                ></el-button>
                <el-button
                  @click="addGoode(scope.row)"
                  type="warning"
                  plain
                  icon="el-icon-check"
                  circle
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 跳转页面 -->
        <div class="topCard TopCard">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            layout="prev, pager, next, sizes,  jumper"
            :total="tatal"
          >
          </el-pagination>
        </div>

        <!-- 放置一个弹层 -->
        <el-dialog title="题目预览" :visible="showDialog" @close="btnCancel">
          <!-- 题型列表 -->
          <el-descriptions :column="4">
            <el-descriptions-item label="【题型】">{{
              pop.questionType | dataChange
            }}</el-descriptions-item>
            <el-descriptions-item label="【编号】">{{
              pop.id
            }}</el-descriptions-item>
            <el-descriptions-item label="【困难】">{{
              pop.difficulty | difChange
            }}</el-descriptions-item>
            <el-descriptions-item label="【标签】">{{
              pop.tags
            }}</el-descriptions-item>
            <el-descriptions-item label="【学科】">{{
              pop.subjectName
            }}</el-descriptions-item>
            <el-descriptions-item label="【目录】">{{
              pop.directoryName
            }}</el-descriptions-item>
            <el-descriptions-item label="【方向】">{{
              pop.direction
            }}</el-descriptions-item>
          </el-descriptions>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <div>
            <p>【题干】:</p>
            <p class="questionColor">
              <span v-html="pop.question"></span>
            </p>
            <p>
              {{ pop.questionType | dataChange }} 选项: &nbsp;
              (以下选中的选项为正确答案)
            </p>
            <!-- 单选题目 -->
            <el-radio-group v-model="radio">
              <div v-for="(item, index) in pop.options" :key="index">
                <el-radio style="margin-bottom: 15px" :label="item.isRight">{{
                  item.title
                }}</el-radio>
              </div>
            </el-radio-group>
            <!-- 分割线 -->
            <el-divider></el-divider>
            <!-- 视频部分 -->
            <el-descriptions class="but">
              <el-descriptions-item label="【参考答案】">
                <!-- <el-tag> -->
                <el-button @click="vid" type="danger">视频答案预览</el-button>
                <div>
                  <video
                    class="videoSize"
                    v-if="isVideo"
                    :src="pop.videoURL"
                    controls="controls"
                  ></video>
                </div>
                <!-- </el-tag> -->
              </el-descriptions-item>
            </el-descriptions>
            <!-- 分割线 -->
            <el-divider></el-divider>
            <!-- 答案解析 -->
            <el-descriptions :column="1">
              <el-descriptions-item label="【答案解析】">{{
                pop.answerID
              }}</el-descriptions-item>
            </el-descriptions>
            <!-- 分割线 -->
            <el-divider></el-divider>
            <!-- 题目备注 -->
            <el-descriptions :column="1">
              <el-descriptions-item label="【题目备注】">{{
                pop.remarks
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="topCard">
            <el-button @click="btnCancel" type="primary">关闭</el-button>
          </div>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import './questions-new'
import { createAPI } from '@/utils/request'
import { difficulty, questionType, direction } from '../../api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list, detail, remove, choiceAdd } from '../../api/hmmm/questions'
export default {
  data () {
    return {
      biaoqians: [],
      mulus: [],
      // 科目
      subjectList: [],
      size: 10,
      // 总条数数据
      tatal: 0,
      isVideo: false,
      pop: {},
      // 单选框radio
      radio: 1,
      showDialog: false,
      // 省市数组
      citySelect: {
        provinceList: [],
        cityList: []
      },
      // 枚举数组
      questionType: questionType,
      difficulty: difficulty,
      direction: direction,
      tableData: [],
      currentPage: 1,
      form: {
        tags: null, // 标签名称
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creator: null, // 录入人
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 所在省份
        city: null // 企业所在城市
      }
    }
  },
  watch: {
    direction () {
      return direction
    }
  },
  created () {
    this.getCityData()
    this.list()
    this.getList()
  },
  methods: {
    async biaoqian () {
      const simple = data => createAPI('/tags/simple', 'get', data)
      const res = await simple(this.form)
      console.log(res)
      this.biaoqians = res.data
    },
    // 科目列表
    async getList () {
      const list = (data) => createAPI('/subjects', 'get', data)
      const res = await list({ pagesize: 100 })
      console.log()
      this.subjectList = res.data.items
      console.log(this.subjectList)
    },
    async mulu () {
      const simple = data => createAPI('/directorys/simple', 'get', data)
      const res = await simple(this.form)
      this.mulus = res.data
      // this.subjectList = res.data.items
      // console.log(this.subjectList)
    },
    // 加入精选
    async addGoode (data) {
      // const confirmRes = await this.$confirm(
      //   '此操作将加入精选, 是否继续?',
      //   '提示',
      //   {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }
      // ).catch((err) => err)
      // if (confirmRes === 'cancel') return this.$message('您取消该操作')
      // await choiceAdd(data)
      // this.$message.success('操作成功')
      const confirmRes = await this.$confirm('此操作将该题目添加到精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).catch(err => err)
      // 点出取消
      if (confirmRes === 'cancel') return this.$message('你已取消添加到精选')
      // 点击确定后 发送请求加入精选题
      await choiceAdd({ id: data.id, choiceState: 1 })
      this.$message.success('加入精选题库成功')
      this.$router.push('/questions/choice')
    },
    // 删除按钮
    async delBut (data) {
      const confirmRes = await this.$confirm(
        '此操作将删除该内容, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') return this.$message('您取消该操作')
      await remove(data)
      this.$message.success('操作成功')
      if (this.tableData.length === 1) {
        this.query.page--
        // 如果页码小于等于1 ，页码需要重置为1
        if (this.query.page <= 1) {
          this.query.page = 1
        }
      }
      this.list()
    },
    // 出现视频播放
    vid () {
      this.isVideo = true
    },
    // 出现详情弹框
    async detailBut (id) {
      const res = await detail(id)

      this.pop = res.data
      this.showDialog = true
    },

    // 点击关闭弹框
    btnCancel () {
      this.showDialog = false
    },
    // 跳转到试题录入页面
    toAdd (data) {
      this.$router.push('new?id=' + data.id)
    },
    // 清理数据
    resetForm () {
      this.form = {
        tags: null, // 标签名称
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creator: null, // 录入人
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 所在省份
        city: null // 企业所在城市
      }
      this.mulus = []
      this.biaoqians = []

      this.$refs.form.resetFields()
    },
    // 页面改变发生
    handleSizeChange (value) {
      this.size = value
      this.list()
    },
    handleCurrentChange (value) {
      this.currentPage = value
      this.list()
    },

    // 获取数据渲染
    async list () {
      const res = await list({ page: this.currentPage, pagesize: this.size })
      // console.log(res)
      // 渲染表格
      this.tableData = res.data.items
      // 获取prop
      this.tatal = res.data.counts
    },
    // 获取省
    getCityData () {
      this.citySelect.provinceList = provinces()
    },

    // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityList = citys(e)
    },
    // 搜索
    async soon () {
      const res = await list({ ...this.form })
      this.tableData = res.data.items
      console.log(res)
    }
  },
  // 过滤器
  filters: {
    dataChange (val) {
      if (val === '1') {
        return '单选'
      } else {
        if (val === '2') {
          return '多选'
        } else {
          return '简答'
        }
      }
    },
    difChange (val) {
      if (val === '1') {
        return '简单'
      } else {
        if (val === '2') {
          return '一般'
        } else {
          return '困难'
        }
      }
    }
  }
}
</script>

<style scoped>
::v-deep.inpselect {
  width: 100%;
}
.videoSize {
  width: 300px;
  height: 300px;
}
.Btn {
  margin-right: 0px;
}
.questionColor {
  color: blue;
}
.TopCard {
  margin-top: 10px;
}
.Tab {
  margin-top: 10px;
}

.topCard {
  margin-right: 20px;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
}
.pRed {
  font-size: 12px;
  color: pink;
  align-self: auto;
  flex: auto;
  order: 0;
}

::v-deep .ipt .el-input__inner {
  width: 220px;
}
::v-deep .Clear .el-form-item__content {
  margin-left: 150px;
}
</style>
